/*
 * @Author: liangliang
 * @Date: 2023-05-18 15:40:29
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:14:43
 * @Description: 线上bug登记
 */

import React, { useState, useEffect } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';

import { useAntdTable } from 'ahooks';
import {
    Button,
    Form,
    Input,
    Row,
    message,
    Space,
    DatePicker,
    Table,
    Modal,
    Select,
    Col,
    Card,
    Switch,
    Radio,
    TreeSelect,
    Cascader,
    InputNumber,
    Spin,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useFormModal } from '@/hooks/useFormModal';
import {
    bugRegisterEdit,
    bugRegisterQryPage,
    bugRegisterAdd,
} from '@/config/request/manage';
import {
    deliveryStockOut,
    pkgTransferAndShelve,
    getDeliveryTaskInfo,
} from '@/config/request/testTools';

import './../module/index.scss';
type SizeType = Parameters<typeof Form>[0]['size'];
const CustomerApi: React.FC = () => {
    const formTailLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 14, offset: 4 },
    };
    const [form] = Form.useForm();
    const [pkgForm] = Form.useForm();
    const [getInfoForm] = Form.useForm();
    const [checkNick, setCheckNick] = useState(false);

    useEffect(() => {
        form.validateFields(['nickname']);
    }, [checkNick, form]);

    const onCheckboxChange = (e: { target: { checked: boolean } }) => {
        setCheckNick(e.target.checked);
    };

    const [loading, setLoading] = useState(false);

    // todo: 等待接口请求：/stockout/getDeliveryTaskInfo
    const onCheck3 = async () => {
        try {
            const re = await getInfoForm.validateFields();
            const param = {
                deliveryTaskCode: re.deliveryTaskCode1,
            };
            console.log('------------', param);
            setLoading(true);
            const res = await getDeliveryTaskInfo(param);
            setLoading(false);
            showModal(res.data);
            console.log('Success:', res);
        } catch (errorInfo) {
            console.log('Failed:', '必填项为空');
        }
    };

    // todo: 等待接口请求：/order/deliveryStockOut
    const onCheck2 = async () => {
        try {
            const re = await pkgForm.validateFields();
            const param = {
                pkgCode: re.pkgCode,
            };
            console.log('------------', param);
            setLoading(true);
            const res = await pkgTransferAndShelve(param);
            setLoading(false);
            showModal(res.data);
            console.log('Success:', res);
        } catch (errorInfo) {
            console.log('Failed:', '必填项为空');
        }
    };

    // todo: 等待接口请求：/order/deliveryStockOut
    const onCheck1 = async () => {
        try {
            const re = await form.validateFields();
            const param = {
                operationNode: Number.parseInt(re.node),
                deliveryTaskCode: re.deliveryTaskCode,
            };
            console.log('------------', param);
            setLoading(true);
            const res = await deliveryStockOut(param);
            setLoading(false);
            showModal(res.data);
            console.log('Success:', res);
        } catch (errorInfo) {
            console.log('Failed:', '必填项为空');
        }
    };

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [jsonObj, setJsonStr] = useState({});
    const showModal = (obj) => {
        setJsonStr(obj);
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <div className="bg-white p-2.5">
            {loading ? (
                <Spin tip="Loading" size="large">
                    <div className="content" />
                </Spin>
            ) : (
                <div>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                        <Col span={12}>
                            <Card title="2B国际发货单流程" bordered={false}>
                                <Form
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                    form={form}
                                    initialValues={{ node: '6' }}
                                >
                                    <Form.Item
                                        label="国际发货单号："
                                        name={'deliveryTaskCode'}
                                        rules={[
                                            {
                                                required: true,
                                                message:
                                                    '请输入大包国际发货单号!',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入大包国际发货单号" />
                                    </Form.Item>
                                    <Form.Item
                                        label="发货节点："
                                        name={'node'}
                                        rules={[{ required: true }]}
                                    >
                                        <Select
                                            options={[
                                                {
                                                    value: '1',
                                                    label: '审单完成',
                                                },
                                                {
                                                    value: '2',
                                                    label: '生成拣货任务',
                                                },
                                                {
                                                    value: '3',
                                                    label: '拣货完成',
                                                },
                                                {
                                                    value: '4',
                                                    label: '打标完成',
                                                },
                                                {
                                                    value: '5',
                                                    label: '打包完成',
                                                },
                                                {
                                                    value: '6',
                                                    label: '发货完成',
                                                },
                                            ]}
                                        />
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck1}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="批次包：一键成品上架" bordered={false}>
                                <Form
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                    form={pkgForm}
                                >
                                    <Form.Item
                                        label="批次包："
                                        name={'pkgCode'}
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入批次包!',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入批次包" />
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck2}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    </Row>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                    <Col span={12}>
                            <Card title="查询国际发货单状态" bordered={false}>
                                <Form
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                    form={getInfoForm}
                                >
                                    <Form.Item
                                        label="国际发货单号："
                                        name={'deliveryTaskCode1'}
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入国际发货单号!',
                                            },
                                        ]}
                                    >
                                        <Input placeholder="请输入国际发货单号" />
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck3}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="一键修改会员等级" bordered={false}>
                                <Form
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                >
                                    <Form.Item label="登陆名称：">
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="店铺ID：">
                                        <Input />
                                    </Form.Item>
                                    <Form.Item label="会员等级：">
                                        <Select>
                                            <Select.Option value="1">
                                                经济舱
                                            </Select.Option>
                                            <Select.Option value="2">
                                                标准舱
                                            </Select.Option>
                                            <Select.Option value="3">
                                                商务舱
                                            </Select.Option>
                                            <Select.Option value="4">
                                                头等舱
                                            </Select.Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck2}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Card title="Card title" bordered={false}>
                                Card content
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="Card title" bordered={false}>
                                Card content
                            </Card>
                        </Col>
                    </Row>
                    <Modal
                        title="执行结果："
                        open={isModalOpen}
                        onOk={handleOk}
                        onCancel={handleCancel}
                    >
                        <SyntaxHighlighter
                            language="javascript"
                            style={solarizedlight}
                        >
                            {/* {code} */}
                            {JSON.stringify(jsonObj, null, 4)}
                        </SyntaxHighlighter>
                    </Modal>
                </div>
            )}
        </div>
    );
};

export default CustomerApi;
